<template>
	<div>
		<el-form-item label="尺寸" required>
			<el-select class="xuanz_cichu" disabled size="mini" v-model="formData.cichun" placeholder="活动区域">
				<el-option label="最大" value="1">最大</el-option>
				<el-option label="最小" value="0">最小</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="生成个数" required>
			<el-input-number size="mini" v-model="formData.number" controls-position="right" :min="1">
			</el-input-number>
			<!-- <el-input size="mini" placeholder="生成个数" class="geshu" type="number" v-model="formData.region"></el-input> -->
		</el-form-item>
		<el-form-item label="声音" required>
			<el-slider v-model="formData.yinliang"></el-slider>
		</el-form-item>
    <el-form-item label="剪辑师名称" required>
      <el-input placeholder="请输入剪辑师名称" type="text" v-model="formData.editor_name"/>
    </el-form-item>
    <el-form-item label="视频素材A片段" required style="position: relative;">
      <div>选择文件夹名称：{{formData.material_a_file_name==''?'未选择文件夹':formData.material_a_file_name}}</div>
      <div>
        <!--<uploadmp3 :imgids.sync="formData.bgm" :fileLists.sync="imageUrl" :formData="{sfrom:1}"></uploadmp3>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectATc" size="mini">选择素材A片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材B片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_b_file_name==''?'未选择文件夹':formData.material_b_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectBTc" size="mini">选择素材B片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材C片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_c_file_name==''?'未选择文件夹':formData.material_c_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectCTc" size="mini">选择素材C片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材D片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_d_file_name==''?'未选择文件夹':formData.material_d_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectDTc" size="mini">选择素材D片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材E片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_e_file_name==''?'未选择文件夹':formData.material_e_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectETc" size="mini">选择素材E片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材F片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_f_file_name==''?'未选择文件夹':formData.material_f_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectFTc" size="mini">选择素材F片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材G片段" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_g_file_name==''?'未选择文件夹':formData.material_g_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectGTc" size="mini">选择素材G片段<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
    <el-form-item label="视频素材BGM" style="position: relative;">
      <div>选择文件夹名称：{{formData.material_bgm_file_name==''?'未选择文件夹':formData.material_bgm_file_name}}</div>
      <div>
        <!--<upload :imgids.sync="formData.zimu" :fileLists.sync="imageUrl_zimu" :formData="{sfrom:2}">-->
        <!--</upload>-->
        <el-button type="primary" class="xuanzhe_bgm" @click="handleSelectBGMTc" size="mini">选择素材BGM<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </el-form-item>
		<el-dialog title="视频素材A片段" :visible.sync="select_a_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChange"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_a_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_a_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材B片段" :visible.sync="select_b_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangess"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_b_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_b_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材C片段" :visible.sync="select_c_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChanges"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_c_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_c_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材D片段" :visible.sync="select_d_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangesss"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_d_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_d_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材E片段" :visible.sync="select_e_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangeE"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_e_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_e_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材F片段" :visible.sync="select_f_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangeF"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_f_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_f_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材G片段" :visible.sync="select_g_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangeG"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_g_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_g_tc = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="视频素材BGM" :visible.sync="select_bgm_tc" width="80%">
			<el-tree
					ref="trees"
					:load="loadNode"
					lazy
					node-key="id"
					:props="defaultProps"
					:current-node-key="current_fold_id"
					@node-click="handleNodeClick"
					:show-checkbox="true"
					:check-on-click-node="true"
					:check-strictly="true"
					@check="handleCheckChangeBGM"
			>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="select_bgm_tc = false">取 消</el-button>
				<el-button type="primary" @click="select_bgm_tc = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
    import {
        getFolders,
    } from "../../../../api";
	export default {
		//存放 数据
		data: function() {
			return {
                current_path_list:[],
                current_fold_id: null,
                defaultProps: {
                    label: "name",
                    children: "name",
                },
        form: {
          number: 1,
          yinliang: 30,
          cichun: '最大',
          editor_name:"",
          material_a_file_id: [],
          material_a_file_name:'',
          material_b_file_id: [],
          material_b_file_name:'',
          material_c_file_id:[],
          material_c_file_name:"",
          material_d_file_id:[],
          material_d_file_name:"",
          material_e_file_id: [],
          material_e_file_name:"",
          material_f_file_id: [],
          material_f_file_name:"",
          material_g_file_id:[],
          material_g_file_name:"",
          material_bgm_file_id:[],
          material_bgm_file_name:"",
        },
				select_a_tc: false,
				select_b_tc: false,
                select_c_tc:false,
                select_d_tc:false,
                select_e_tc:false,
                select_f_tc:false,
                select_g_tc:false,
                select_bgm_tc:false,
				status: 0,
				imageUrl_zimu: [],
				imageUrl: [],
			}
		},
		props: {
			formData: {
				type: Object,
				default: function() {
					return {};
				},
			},
		},
		/*  生命周期函数  */
		//创建期间
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {

		},
		//运行期间
		beforeUpdate() {},
		updated() {},
		//销毁时期
		beforeDestroy() {},
		destroyed() {},
		//存放 方法
		methods: {
			xiayibu() {
				this.status = 1
			},
            async getFolderList(id) {
                let res = await getFolders({ parent_id: id }).catch((e) => e);
                if (res.code == 200 || res.msg == "success") {
                    return res.data.list;
                } else {
                    this.$message.error("获取文件夹列表失败");
                    return false;
                }
            },
            getFolderPath(currentNode) {
                if (currentNode.parent && currentNode.parent.data) {
                    this.getFolderPath(currentNode.parent);
                    this.current_path_list.push(currentNode.data.name);
                } else {
                    this.current_path_list.push(currentNode.data.name);
                }
            },
            async loadNode(node, resolve) {
                if (node.level >= 0 && node.level < 3) {
                    // 限制最多3级
                    let list = await this.getFolderList(node.data ? node.data.id : 0);
                    if (list && list.length > 0 && node.level == 0) {
                        this.current_fold_id = list[0].id;
                        this.selectFolderDirectoryPath = list[0].name;
                        this.$nextTick(() => {
                            this.$refs.trees.setCurrentKey(list[0].id);
                        });
                    }
                    return resolve(list || []);
                }
                if (node.level >= 3) {
                    return resolve([]);
                }
            },
            handleNodeClick(data, node, myself) {
                console.log(data, node);
                if (data.id != this.current_fold_id) {
                    this.current_fold_id = data.id;
                    this.current_node = node;
                    this.current_path_list = [];
                    this.getFolderPath(node);
                    this.selectFolderDirectoryPath = this.current_path_list.join(" / ");
                }
            },

            handleCheckChange(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_a_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_a_file_id= child_node;
              this.formData.material_a_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_a_file_id"+this.formData.material_a_file_id);
            },

            handleCheckChangess(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_b_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_b_file_id= child_node;
              this.formData.material_b_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_b_file_id"+this.formData.material_b_file_id);
            },
            handleCheckChanges(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_c_file_id=node.id;
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                console.log("child_node");
                console.log(child_node);
                let father_node =this.$refs.trees.getHalfCheckedKeys();
                // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_c_file_id= child_node;
              this.formData.material_c_file_name= node.name;
                console.log("father_node");
                console.log(father_node);
                console.log("this.formData.material_c_file_id"+this.formData.material_c_file_id);
            },
            handleCheckChangesss(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_d_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_d_file_id= child_node;
              this.formData.material_d_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_d_file_id"+this.formData.material_d_file_id);
            },
            handleCheckChangeE(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_d_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_e_file_id= child_node;
              this.formData.material_e_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_e_file_id"+this.formData.material_e_file_id);
            },
            handleCheckChangeF(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_d_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_f_file_id= child_node;
              this.formData.material_f_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_f_file_id"+this.formData.material_f_file_id);
            },
            handleCheckChangeG(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_d_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_g_file_id= child_node;
              this.formData.material_g_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_g_file_id"+this.formData.material_g_file_id);
            },
            handleCheckChangeBGM(node,list) {
                if (list.checkedKeys.length ==2) {
                    this.$refs.trees.setCheckedKeys([node.id]);
                    // this.formData.material_d_file_id=node.id
                }
                let child_node = this.$refs.trees.getCheckedKeys();
                // console.log("child_node");
                // console.log(child_node);
                // let father_node =this.$refs.trees.getHalfCheckedKeys();
                // // this.formData.treeData= child_node.concat(father_node)
                this.formData.material_bgm_file_id= child_node;
              this.formData.material_bgm_file_name= node.name;
                // console.log("father_node");
                // console.log(father_node);
                console.log("this.formData.material_bgm_file_id"+this.formData.material_bgm_file_id);
            },
            handleSelectATc(){
              if(this.formData.editor_name==""){
                return this.$message.error("请输入剪辑师名称")
              }
                this.select_a_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_a_file_id);
              })
            },
            handleSelectBTc(){
                if(this.formData.material_a_file_id.length==0){
                    return this.$message.error("请先选择素材A片段")
                }
                this.select_b_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_b_file_id);
              })
            },
			handleSelectCTc(){
                if(this.formData.material_b_file_id.length==0){
                    return this.$message.error("请先选择素材B片段")
                }
                this.select_c_tc=true;
        this.$nextTick(() => {
          this.$refs.trees.setCheckedKeys(this.formData.material_c_file_id);
        })
            },
            handleSelectDTc(){
                if(this.formData.material_c_file_id.length==0){
                    return this.$message.error("请先选择素材C片段")
                }
            this.select_d_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_d_file_id);
              })
        },
            handleSelectETc(){
                if(this.formData.material_d_file_id.length==0){
                    return this.$message.error("请先选择素材D片段")
                }
                this.select_e_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_e_file_id);
              })
            },
            handleSelectFTc(){
                if(this.formData.material_e_file_id.length==0){
                    return this.$message.error("请先选择素材E片段")
                }
                this.select_f_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_f_file_id);
              })
            },
            handleSelectGTc(){
                if(this.formData.material_f_file_id.length==0){
                    return this.$message.error("请先选择素材F片段")
                }
                this.select_g_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_g_file_id);
              })
            },
            handleSelectBGMTc(){
                this.select_bgm_tc=true;
              this.$nextTick(() => {
                this.$refs.trees.setCheckedKeys(this.formData.material_bgm_file_id);
              })
            },
		},
		components: {
		},
		//存放 过滤器
		filters: {},
		//自定义 私有指令
		directives: {},
		// 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
		// props 中的数据，都是只读的，无法重新赋值
		// props: [], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
	}
</script>

<style scoped>
	.kuang {
		display: flex;
	}

	.caoz {
		height: 100%;
		min-height: 400px;
		flex: 1 1;
		padding: 0 20px;
		border-left: 1px dashed #777;
	}

	.geshu {
		width: 100px;
	}

	.xuanz_cichu {
		width: -webkit-fill-available;
	}

	>>>.el-form-item {
		margin-bottom: 10px;
	}

	>>>.el-slider__bar {
		background-color: #91d5ff;
	}

/*	.xuanzhe_bgm {
		position: absolute;
		top: 6px;
		left: 89px;
	}*/
</style>
